<template>
  <div class="content">
    <table class="Datatable">
      <thead>
        <tr>
          <th>操作模块</th>
          <th>职位</th>
          <th>操作人</th>
          <th>操作时间</th>
          <th>操作详情</th>
        </tr>
      </thead>
      <tbody v-if="tableData.length != 0">
        <tr v-for="item in tableData" :key="item.id">
          <td>{{ item.operatePart }}</td>
          <td>
            <span :class="['admin', item.roleName === '超级管理员' ? 'super' : '']">{{ item.roleName }}</span>
          </td>
          <td>{{ item.adminName }}</td>

          <td>{{ setLocalTime(item.startTime) }}</td>
          <td>{{ item.userInfo }}</td>
        </tr>
      </tbody>
      <tbody v-else>
        <tr>
          <td colspan="5">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <div class="flex-end">
      <el-pagination
        v-if="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="size"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      currentPage: 1,
      size: 10,
      checkboxList: [],
      checked: false
    }
  },
  computed: {
    tableData () {
      return this.$store.state.systemManage.adminLogData.tableData
    },
    total () {
      return this.$store.state.systemManage.adminLogData.total
    }
  },
  methods: {
    handleCurrentChange (val) {
      this.currentPage = val
      this.$emit('changePage', { page: val })
    },
    handleSizeChange (size) {
      this.size = size
      this.$emit('changePage', { size })
    },
    setLocalTime (time) {
      return this.$moment(+new Date(time)).format('YYYY-MM-DD HH:mm:ss')
    }

  },
  watch: {

  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  min-height: 754px;
  margin-top: 20px;
  background-color: #fff;
  padding: 30px 24px;
  padding-bottom: 120px;
  border-radius: 8px;
  table {
    th,
    td {
      &:nth-child(1) {
        width: 380px;
      }
      &:nth-child(2) {
        width: 240px;
      }
      &:nth-child(3) {
        width: 280px;
      }
      &:nth-child(4) {
        width: 337px;
      }
      &:nth-child(5) {

      }
    }
  }
  .admin {
    display: inline-block;
    width: 84px;
    height: 30px;
    opacity: 1;
    background: #eef0ff;
    border-radius: 4px;
    line-height: 30px;
    color: #304eec;
  }
    .super {
    background-color: #fff5eb;
    color: #e88300;
  }
}
</style>
